<template>
    <div class="home">
        <div id="myCarousel" class="carousel slide">
          <!-- 轮播（Carousel）指标 -->
          <ol class="carousel-indicators">
           <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
           <li data-target="#myCarousel" data-slide-to="1"></li>
           <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>   
          <!-- 轮播（Carousel）项目 -->
         <div class="carousel-inner">
           <div class="item active">
            <img src="../../assets/images/banner_02.png" alt="First slide">
            <div class="carousel-caption">
              <div class="en-text">FOCUS ON HEALTH</div>
              <div class="focus-health"><span>专注</span><span>健康</span></div>
              <div>
                <el-button-group>
                  <el-button type="primary" class="el-button1">健康生活</el-button>
                  <el-button type="primary" class="el-button2">医疗保障</el-button>
                </el-button-group>
              </div>
            </div>
           </div>
           <div class="item">
            <img src="../../assets/images/banner_02.png" alt="Second slide">
            <div class="carousel-caption">
              <div class="en-text">FOCUS ON HEALTH</div>
              <div class="focus-health"><span>专注</span><span>健康</span></div>
              <div>
                <el-button-group>
                  <el-button type="primary" class="el-button1">健康生活</el-button>
                  <el-button type="primary" class="el-button2">医疗保障</el-button>
                </el-button-group>
              </div>
            </div>
           </div>
           <div class="item">
            <img src="../../assets/images/banner_02.png" alt="Third slide">
            <div class="carousel-caption">
              <div class="en-text">FOCUS ON HEALTH</div>
              <div class="focus-health"><span>专注</span><span>健康</span></div>
              <div>
                <el-button-group>
                  <el-button type="primary" class="el-button1">健康生活</el-button>
                  <el-button type="primary" class="el-button2">医疗保障</el-button>
                </el-button-group>
              </div>
            </div>
           </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next"><span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
      </div>
        <!-- 科室介绍 -->
        <div class="departIntroduc">
           <!-- <el-button-group>
                  <el-button type="primary" class="el-button3">技术团队</el-button>
                  <el-button type="primary" class="el-button4">诊所地点</el-button>
           </el-button-group> -->
                <div class="btn-group" role="group" aria-label="...">
                  <button type="button" class="btn el-button3">技术团队</button>
                  <button type="button" class="btn el-button4">诊所地点</button>
                </div>
           <h3>科室介绍</h3>
           <div>
             <div class="branch">
                <div @mouseleave="taggle1('icon_30.png');showRect1()" @mouseenter="taggle1('icon_03.png');hideRect1()">
                   <img :src="General">
                   <p>全科</p>
                   <p :class="{hideRect:hide1,rectangle:show1}"></p>
                   <p class="en">General Practice</p>
                </div>
                <div @mouseleave="taggle2('icon_34.png');showRect2()" @mouseenter="taggle2('icon_31.png');hideRect2()">
                   <img :src="Rehabilitation">
                   <p>康复科</p>
                   <p :class="{hideRect:hide2,rectangle:show2}"></p>
                   <p class="en">Rehabilitation</p>
                </div>
                <div>
                   <div @mouseleave="taggle3('icon_111.png');showRect3()" @mouseover="taggle3('icon_33.png');hideRect3()">
                     <img :src="Pediatrics">
                     <p>儿科</p>
                     <p :class="{hideRect:hide3,rectangle:show3}"></p>
                     <p class="en">Pediatrics</p>
                   </div>
                </div>
                <div>
                   <div @mouseleave="taggle4('icon_103.png');showRect4()" @mouseover="taggle4('icon_35.png');hideRect4()">
                     <img :src="Gynecology">
                     <p>妇科</p>
                     <p :class="{hideRect:hide4,rectangle:show4}"></p>
                     <p class="en">Gynecology</p>
                   </div>
                </div>
             </div>
             <div class="branch">
                <div @mouseleave="taggle5('icon_164.png');showRect5()" @mouseenter="taggle5('icon_47.png');hideRect5()">
                   <img :src="Cardiovascular">
                   <p>心血管科</p>
                   <p :class="{hideRect:hide5,rectangle:show5}"></p>
                   <p class="en">Cardiovascular</p>
                </div>
                <div @mouseleave="taggle6('icon_112.png');showRect6()" @mouseenter="taggle6('icon_49.png');hideRect6()">
                   <img :src="Neurology">
                   <p>神经科</p>
                   <p :class="{hideRect:hide6,rectangle:show6}"></p>
                   <p class="en">Neurology</p>
                </div>
                <div>
                   <div @mouseleave="taggle7('icon_159.png');showRect7()" @mouseover="taggle7('icon_51.png');hideRect7()">
                     <img :src="Oncology">
                     <p>肿瘤科</p>
                     <p :class="{hideRect:hide7,rectangle:show7}"></p>
                     <p class="en">Oncology</p>
                   </div>
                </div>
                <div>
                   <div @mouseleave="taggle8('icon_203.png');showRect8()" @mouseover="taggle8('icon_53.png');hideRect8()">
                     <img :src="Chinese">
                     <p>中医科</p>
                     <p :class="{hideRect:hide8,rectangle:show8}"></p>
                     <p class="en">Chinese Acupuncture</p>
                   </div>
                </div>
             </div>
           </div>
        </div>
        <div class="news">
          <div class="w">
             <div class="news-left">
               <div class="dynamic-message">
                 <p>长木动态资讯</p>
               </div>
               <div class="borders"></div>
               <div class="message">
                <div class="media">
                  <div class="media-left">
                   <a href="#">
                     <img class="media-object" src="../../assets/images/message_03.png">
                   </a>
                  </div>
                  <div class="media-body">
                     <h4 class="media-heading">乐普医疗AI-ECG Platform通过美国FDA批准</h4>
                     <p class="media-heading-p">乐普（北京）医疗器械股份有限公司于11月19日发布公告，公司全资子公司深圳市凯沃尔电子有限公司自主的... </p>
                     <span><a href="" class="media-heading-a">查看全部</a></span>
                  </div>
                 </div>
                 <div class="media">
                  <div class="media-left">
                   <a href="#">
                     <img class="media-object" src="../../assets/images/message_03.png">
                   </a>
                  </div>
                  <div class="media-body">
                     <h4 class="media-heading">乐普医疗AI-ECG Platform通过美国FDA批准</h4>
                     <p class="media-heading-p">乐普（北京）医疗器械股份有限公司于11月19日发布公告，公司全资子公司深圳市凯沃尔电子有限公司自主的... </p>
                     <span><a href="" class="media-heading-a">查看全部</a></span>
                  </div>
                 </div>
                 <div class="media">
                  <div class="media-left">
                   <a href="#">
                     <img class="media-object" src="../../assets/images/message_03.png">
                   </a>
                  </div>
                  <div class="media-body">
                     <h4 class="media-heading">乐普医疗AI-ECG Platform通过美国FDA批准</h4>
                     <p class="media-heading-p">乐普（北京）医疗器械股份有限公司于11月19日发布公告，公司全资子公司深圳市凯沃尔电子有限公司自主的... </p>
                     <span><a href="" class="media-heading-a">查看全部</a></span>
                  </div>
                 </div>
               </div>
            </div>
            <div class="news-right">
               <div class="dynamic-message">
                 <p>产品套餐</p>
               </div>
               <div class="borders"></div>
               <div class="message">
                <div class="media">
                  <div class="media-left">
                   <a href="#">
                     <img class="media-object" src="../../assets/images/message_05.png">
                   </a>
                  </div>
                  <div class="media-body">
                     <h4 class="media-heading">儿童套餐</h4>
                     <p class="media-heading-p">暖心套餐（关爱精英套餐） </p>
                     <span><a href="" class="media-heading-a">查看全部</a></span>
                  </div>
                 </div>
                 <div class="media">
                  <div class="media-left">
                   <a href="#">
                     <img class="media-object" src="../../assets/images/message_05.png">
                   </a>
                  </div>
                  <div class="media-body">
                     <h4 class="media-heading">儿童套餐</h4>
                     <p class="media-heading-p">暖心套餐（关爱精英套餐)</p>
                     <span><a href="" class="media-heading-a">查看全部</a></span>
                  </div>
                 </div>
                 <div class="media">
                  <div class="media-left">
                   <a href="#">
                     <img class="media-object" src="../../assets/images/message_05.png">
                   </a>
                  </div>
                  <div class="media-body">
                     <h4 class="media-heading">儿童套餐</h4>
                     <p class="media-heading-p">暖心套餐（关爱精英套餐)</p>
                     <span><a href="" class="media-heading-a">查看全部</a></span>
                  </div>
                 </div>
               </div>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
      return {
        General:'../../../static/images/icon_03.png',  //全科
        Rehabilitation:'../../../static/images/icon_31.png', //康复科
        Pediatrics:'../../../static/images/icon_33.png',    //儿科
        Gynecology:'../../../static/images/icon_35.png',    //妇科
        Cardiovascular:'../../../static/images/icon_47.png',  //心血管科
        Neurology:'../../../static/images/icon_49.png', //神经科
        Oncology:'../../../static/images/icon_51.png',    //肿瘤科
        Chinese:'../../../static/images/icon_53.png',    //中医科
        hide1:false,
        show1:true,
        hide2:false,
        show2:true,
        hide3:false,
        show3:true,
        hide4:false,
        show4:true,
        hide5:false,
        show5:true,
        hide6:false,
        show6:true,
        hide7:false,
        show7:true,
        hide8:false,
        show8:true,
      }
    },
    methods:{
        // 全科
       showRect1(){
        this.show1=true;
        this.hide1=false;
       },
       hideRect1(){
        this.hide1=true;
       },
       //康复科
        showRect2(){
        this.show2=true;
        this.hide2=false;
       },
       hideRect2(){
        this.hide2=true;
       },
      //儿科
        showRect3(){
        this.show3=true;
        this.hide3=false;
       },
       hideRect3(){
        this.hide3=true;
       },
       //妇科
        showRect4(){
        this.show4=true;
        this.hide4=false;
       },
       hideRect4(){
        this.hide4=true;
       },
       //心血管科
        showRect5(){
        this.show5=true;
        this.hide5=false;
       },
       hideRect5(){
        this.hide5=true;
       },
        //神经科
        showRect6(){
        this.show6=true;
        this.hide6=false;
       },
       hideRect6(){
        this.hide6=true;
       },
       //肿瘤科
        showRect7(){
        this.show7=true;
        this.hide7=false;
       },
       hideRect7(){
        this.hide7=true;
       },
       //中医科
        showRect8(){
        this.show8=true;
        this.hide8=false;
       },
       hideRect8(){
        this.hide8=true;
       },
       taggle1(dir){
          // 全科
          if(dir!="icon_03.png")
          {
             this.General=this.General.replace(/icon_30.png/,"icon_03.png");
          }
          if(dir=="icon_03.png")
          {
             this.General=this.General.replace(/icon_03.png/,"icon_30.png");
          }
       },
       taggle2(dir){
           // 康复科
          if(dir!="icon_34.png")
          {
             this.Rehabilitation=this.Rehabilitation.replace(/icon_31.png/,"icon_34.png");
          }
          if(dir=="icon_34.png")
          {
             this.Rehabilitation=this.Rehabilitation.replace(/icon_34.png/,"icon_31.png");
          }
       },
       taggle3(dir){
           // 儿科
          if(dir!="icon_33.png")
          {
             this.Pediatrics=this.Pediatrics.replace(/icon_111.png/,"icon_33.png");
          }
          if(dir=="icon_33.png")
          {
             this.Pediatrics=this.Pediatrics.replace(/icon_33.png/,"icon_111.png");
          }
       },
       taggle4(dir){
           // 妇科
          if(dir!="icon_35.png")
          {
             this.Gynecology=this.Gynecology.replace(/icon_103.png/,"icon_35.png");
          }
          if(dir=="icon_35.png")
          {
             this.Gynecology=this.Gynecology.replace(/icon_35.png/,"icon_103.png");
          }
       },
       taggle5(dir){
       // 心血管科
          if(dir!="icon_47.png")
          {
             this.Cardiovascular=this.Cardiovascular.replace(/icon_164.png/,"icon_47.png");
          }
          if(dir=="icon_47.png")
          {
             this.Cardiovascular=this.Cardiovascular.replace(/icon_47.png/,"icon_164.png");
          }
       },
       taggle6(dir){
           // 神经科
          if(dir!="icon_49.png")
          {
             this.Neurology=this.Neurology.replace(/icon_112.png/,"icon_49.png");
          }
          if(dir=="icon_49.png")
          {
             this.Neurology=this.Neurology.replace(/icon_49.png/,"icon_112.png");
          }
       },
       taggle7(dir){
           // 肿瘤科
          if(dir!="icon_51.png")
          {
             this.Oncology=this.Oncology.replace(/icon_159.png/,"icon_51.png");
          }
          if(dir=="icon_51.png")
          {
             this.Oncology=this.Oncology.replace(/icon_51.png/,"icon_159.png");
          }
       },
       taggle8(dir){
           // 中医科
          if(dir!="icon_53.png")
          {
             this.Chinese=this.Chinese.replace(/icon_203.png/,"icon_53.png");
          }
          if(dir=="icon_53.png")
          {
             this.Chinese=this.Chinese.replace(/icon_53.png/,"icon_203.png");
          }
       }
    }
}
</script>

<style scoped>
  /* .carousel-item-text{
      text-align: center;
      margin:317px 0;
  }
  .el-carousel__item:nth-child(n) {
    background:url('../../assets/images/banner_02.png');
  } */
  .item img{
    width:100%;
  }
  .carousel-caption{
    text-align: center;
    margin:186px 0;
  }
  .carousel-indicators .active {
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: #3bb696;
}
  .home{
      width:100%;
      margin:0 auto;
      position:relative;
      top:-20px;
      background:#f5f5f5;
  }
  .en-text{
    font-size: 28px;
    margin-bottom:20px;
  }
  .focus-health{
    margin-bottom:20px;
  }
  .focus-health span:nth-of-type(1){
    font-size: 100px;
    color: #3bb696;
  }
  .focus-health span:nth-of-type(2){
    font-size: 100px;
    color: #3aa5c5;
  }
  .el-button1{
    background:#3aa5c5;
    font-size: 24px;
    width:200px;
  }
  .el-button2{
    background: #3bb696;
    font-size: 24px;
    width:200px;
  }
  .departIntroduc{
    width:1200px;
    text-align: center;
    margin:0 auto;
    margin-top:120px;
  }
  .el-button3{
    background:#3bb696;
    font-size: 24px;
    width:200px;
    color:#fff;
  }
  .el-button4{
    background: #f5f5f5;
    font-size: 24px;
    width:200px;
    border:1px solid #3bb696;
    color: #3bb696;
  }
  h3{
    font-size: 24px;
  }
  .branch{
    display:flex;
    justify-content: space-around;
  }
  .branch div{
    height:283px;
    width:286px;
    background:#fff;
    margin-bottom: 24px;
    color:#3aa5c5;
    cursor:pointer;
  }
  .branch div:hover{
    background:#3aa5c5;
    color:#fff;
  }
  .branch img{
    display:inline-block;
    margin:30px 0 24px 0;
  }
  .rectangle{
    height:5px;
    width:30px;
    background:#3aa5c5;
    margin:0 auto;
    border-radius: 5px;
    z-index: 999;
  }
  .hideRect{
    background:#fff;
    z-index: 999;
    height:5px;
    width:30px;
    margin:0 auto;
    border-radius: 5px;
  }
  p{
    font-size:24px;
  }
  .en{
    font-size: 16px;
  }
  .w{
    width:1200px;
    margin:48px auto;
    display: flex;
  }
  .news{
    display: flex;
    background: #fff;
  }
  .news-left{
    flex:2;
  }
  .news-right{
    flex:2;
  }
  .dynamic-message{
    height:50px;
    width:174px;
    background:#3bb696;
    line-height: 50px;
    text-align: center;
    border-radius: 5px;
    position: relative;
    z-index: 999;
  }
  .dynamic-message p{
    font-size: 24px;
    color:#fff;
  }
  .borders{
    height:50px;
    width:174px;
    border:2px solid #3bb696;
    position: relative;
    top:-32px;
    left:8px;
    border-radius: 5px;
    z-index: 1;
  }
  .media-body{
    width:406px;
  }
  .media-heading{
    font-size:20px;
  }
  .media-heading-p{
   font-size: 16px;
   color:#666666;
  }
  .media-heading-a{
   font-size: 16px;
   text-decoration: none;
  }
</style>
